<!-- 这里定义首页 -->
<template>
    <div class="content">
        
        <!-- 公告部分 -->
        <div id="gonggao">
            <div class="gong1">
                <div id="gong11"><span id="g1">公告</span></div>
                <div id="gong2">
                    <p id="p1">亲爱的住客们：</p>
                    <p style="text-indent:2em">一旦出现 <strong><span style="color:red">发热、咳嗽、</span>浑身乏力、食欲明显下降</strong>、等症状时，请第一时间<strong> 戴好口罩 </strong>到卫健委指定的医疗机构规范就诊。</p>
                </div>
                
            </div>
            
        </div>


        <!-- 各个模块分布 -->
        <div id="mokuai">
            <!-- <p>以下是几个物业管理常用的功能，最后一个是全部功能</p> -->
            <div class="gongneng">
                <div id="gongneng11" class="gongneng2" @click="baoshibaoxiu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-baoshibaoxiu1"></use>
                        </svg>
                    </div>
                    <span>报事报修</span>
                </div>
                <div id="gongneng12" class="gongneng2" @click="PaymentOnline">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiaofei"></use>
                        </svg>
                    </div>
                    <span>线上缴费</span>
                </div>
                <div id="gongneng13" class="gongneng2" @click="zhinengmenjin">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-menjin"></use>
                        </svg>
                    </div>
                    <span>智能门禁</span>
                </div>
            </div>

            <!-- 第二行功能 -->
            <div class="gongneng" >
                <div id="gongneng21" class="gongneng2" @click="baomubaojie">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon--baojiefuwu"></use>
                        </svg>
                    </div>
                    <span>保洁保姆</span>
                </div>
                <div id="gongneng22" class="gongneng2" @click="linglihuzhu">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-huzhu"></use>
                        </svg>
                    </div>
                    <span>邻里互助</span>
                </div>
                <div id="gongneng23" class="gongneng2" @click="tiaozhuan">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-quanbu1"></use>
                        </svg>
                    </div>
                    <span>全部功能</span>
                </div>
            </div>            
        </div>

        <!-- 广告部分 -->
            <!-- <div id="adv"> -->
            <div class="block text-center" m="t-4">
                <br>
                <el-carousel trigger="click" height="195px">
                <el-carousel-item v-for="item in items" :key="item">
                    <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                    <img :src="item.imgurl" style="width:100%;height: 195px;">
                </el-carousel-item>
                </el-carousel>
            </div>      
        <!-- </div> -->

        <!-- 其他 -->
        <div id="shuidian">
            <div id="jiaona">
                <div id="gongneng11" class="gongneng2" @click="bianming">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-electric"></use>
                        </svg>
                    </div>
                    <span>其他</span>
                </div>
                <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shuifei"></use>
                        </svg>
                    </div>
                    <span>房源招租</span>
                </div>
                <div id="gongneng11" class="gongneng2">
                    <div class="topright"> 
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tianjia"></use>
                        </svg>
                    </div>
                    <span>添加</span>
                </div>
            </div>
        </div>
       
    </div>
</template>

<script>
export default{
    name:"Homepager",
    data(){
      return{
          
          items:[
             {
                 imgurl:require("@/assets/ab1.jpeg")
            } ,
             {
                 imgurl:require("@/assets/ab2.png")
            } ,
             {
                 imgurl:require("@/assets/ab3.jpg")
            } ,
             {
                 imgurl:require("@/assets/ab4.jpg")
            } 
          ]
      }
  },
    methods:{
        //跳转到全部功能页面
        tiaozhuan:function(){
            this.$router.replace('/allfunctions')
        },

        baomubaojie:function(){
            this.$router.replace('/baomubaojie')
        },
        waimaidiaoshang:function(){
            this.$router.replace('/waimaidiaoshang')
        },
        linglihuzhu:function(){
            this.$router.replace('/linglihuzhu')
        },
        shequgonggongfuwu:function(){
            this.$router.replace('/shequgonggongfuwu')
        },
        PaymentOnline:function(){
            this.$router.replace('/PaymentOnline')
        },
        baoshibaoxiu:function(){
            this.$router.replace('/baoshibaoxiu')
        },
        zhinengmenjin:function(){
            this.$router.replace('/zhinengmenjin')
        },
        bianming:function(){
            this.$router.replace('/bianming')
        }
    }
}
</script>



<style lang="less" scoped>

.content{
    width: 390px;
    height: 715px;
    background-color: #f7f7f7;
}
// 公告部分
    #gonggao{
        width: 100%;
        height: 200px;
        background-color: rgb(134,190,255);
        p{
            line-height: 1.75em;
        }
        // text-align: center;
        // line-height: 200px;
    }
    .gong1{
        clear: both;
        margin: 0px 13px 0px 18px;
    }
    #gong11{
        // padding-top: 10px;
        clear: both;
        text-align: center;
        height: 25px;
        // padding-top: 5px;
        p{
            font-size: 23px;
        }
    }
    #gong2{
        clear: both;
    }
    #p1{
        height: 15px;
    }
    #g1{
        font-size: 20px;
    }

//功能部分
    .gongneng{
        width: 100%;
        height: 100px;
        align-items: center;
        display: flex;                 ///！！！！！！
        justify-content: space-between;
    }
    #mokuai{
        padding: 6px 15px 6px 15px;
        height: 175px;
    }
// //广告部分
//     #adv{
//         width: 100%;
//         height: 125px;
//         text-align: center;
//         line-height: 80px;
//     }
// 其他部分
    #shuidian{
        width: 100%;
        height: 142px;
        text-align: center;
        background: rgb(231, 240, 233);
        
    }
    #jiaona{
        margin: auto;
        width: 80%;
        height: 100px;
        display: flex;                 ///！！！！！！
        justify-content: space-between; ///！！！！！！
        align-items: center;//垂直居中
    }


</style>
